<template>
  <div>
  <el-card :body-style="{ padding: '0px' }" style="width: 180px; height: 200px; float: left; margin-left: 40px;">
    <img :src="player.image" style="width: 200px; display: block" />
    <div style="padding: 20px; display: block;">
      <span style="color: black; margin-left: 30px; position: relative; bottom: 10px">{{ player.name }}</span>
      <div style="margin-left: 35px">
        <el-button type="primary" @click="submitScore">打分</el-button>
      </div>
    </div>
  </el-card>
  </div>
</template>
<script>
import request from '@/utils/request';
export default {
  name: "score",
  props: {
    player: {
      type: Object,
      required: true
    }
  },
  methods: {
    submitScore() {
      this.$prompt('请输入分数', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]+$/,
        inputErrorMessage: '请输入有效的数字'
      }).then(({ value }) => {
        this.$axios.post('/api/score', {
          playerId: this.player.id,
          score: value
        }).then(response => {
          this.$message({
            type: 'success',
            message: '评分成功!'
          });
          this.$emit('score-updated', this.player.id, value);
        }).catch(error => {
          this.$message.error('评分失败!');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
};
</script>